<template>
    <div class="select-seat-area-demos-container">
        <div class="area-demos">
            <scroll-view :scroll-x="true" style="display: flex;align-items: center; width: 90%;"
                :class="{ 'myLengthPanduan': list.length <= 4 }">
                <div class="items" v-for="( item, index ) in  list " :key="index">
                    <div class="icon">
                        <image :src="formatIcon(index)" mode="widthFix" class="normal" />
                    </div>
                    <div class="price">
                        <div class="price-1">
                            <nut-price :price="item.price / 100" size="small" style="color: #5232B7;" :decimal-digits="2"
                                :thousands="true" />
                        </div>
                    </div>
                </div>
            </scroll-view>
        </div>
        <div style="font-size: 10px;color: #5232B7;text-align: center;margin-bottom: 10px;" v-if="list.length > 4">(可左右滑动)
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, toRefs } from "vue";
import * as seatConfig from "./seat_config";
const props = defineProps({
    list: {
        type: Array<any>,
        required: true,
    },
});
const { list } = toRefs(props);
const formatIcon: any = computed(() => {
    return (index) => {
        return seatConfig.area_arr[index];
    };
});
</script>
<style lang="scss">
.select-seat-area-demos-container {
    display: flex;
    flex-direction: column;
    background: #ffffff;

    .area-demos {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20px 15px;

        .myLengthPanduan {
            justify-content: center;
        }
        .items {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin: 0 15px;
            // flex: 1;
            .icon {
                padding: 5px;
                color: #858a99;
                font-size: 24px;
                width: 40px;
                height: 40px;

                .normal {
                    position: relative;
                    /* margin: 10rpx; */
                    width: 100%;
                    height: 100%;
                }
            }
            .price {
                display: flex;
                flex-direction: column;
                // justify-content: center;
                flex: 1;
                .price-2 {
                    font-size: 16px;
                    text-decoration: line-through;
                    color: #858a99;
                }
                .price-1 {
                    font-size: 16px;
                    width: 85px;
                    // text-decoration: line-through;
                    color: #858a99;
                }
            }
        }
    }
}
</style>
